Contents
Learning FrontPage


What You Will Learn

This tutorial has five lessons that include information about the product, step-by-step procedures, and graphics.

When you have finished these lessons, you will be able to do the following tasks:

FrontPage Explorer:

•	Create a new web

•	Navigate through the FrontPage Explorer

•	Move between the FrontPage Explorer and FrontPage Editor

•	Open an existing web

•	Close a web

FrontPage Editor:

•	Open a page from a web

•	Edit text using various styles

•	Add a table

•	Save changes to a page

•	Insert files

•	Add a bookmark

•	Create links between pages

•	Insert an image and make hotspots

•	Create a form

•	Create WebBots™ (also called “bots”)

•	Change page properties


Using This Tutorial

This tutorial has five lessons that you must do in order. You do not need to do all five lessons at once. The tutorial is designed to allow you to do as many lessons as you want in a session.

Because you will need to switch back and forth between the tutorial and FrontPage, you should close all other applications before doing this tutorial.

In the FrontPage Explorer, the Links to Images, Repeated Links, and Links Inside Page commands affect the display in the Outline and Link Views. While taking this tutorial, if you want your Outline and Link Views to look like the illustrations in the tutorial, hide Links to Images, Repeated Links, and Links Inside Page. These commands are found on the View menu or the FrontPage Explorer toolbar. The link displayed by each command is hidden when the command does not have a check mark next to it on the menu, or when the button on the toolbar is not pressed down.

This tutorial describes how to access and manage files using Windows 95. If you are using a different operating system, the method you use to access and manage files will be different, however, the names of the files and folders (or directories) are the same.

To start a lesson

1	Click Help Topics on the FrontPage Tutorial toolbar.

2	In the Help Topics window, double-click the lesson you want from the list of lessons, then double-click the first topic.

To navigate within a topic:

Each lesson is divided into topics. To move within a topic, use the scroll bar or the Page Up and Page Down keys.

When you have reached the end of a topic, you can press a button to go to the previous or next topic.

To change topics:

To change topics within a lesson, use the Previous Topic or Next Topic buttons, or the Back button in the row of Help buttons at the top of the tutorial window.

To select FrontPage:

Because this tutorial is online, it must share the Windows desktop with the FrontPage Editor and the FrontPage Explorer. When switching between the tutorial and FrontPage, you might accidentally move the insertion point or change the current selection in FrontPage because clicking in the body of a window can move the insertion point to where you clicked. To prevent this from happening, switch between the tutorial and FrontPage using the key combination ALT+TAB. If you want to switch using the mouse, make sure you click the title bar of the FrontPage Explorer or the FrontPage Editor.


Using the FrontPage Explorer

In FrontPage, you create a web in the FrontPage Explorer, then create, edit, and link pages in the FrontPage Editor. When you link pages, you are providing possible ways for a user to navigate through the pages in a web, or to go to other resources on the World Wide Web, such as Gopher and FTP.

In this lesson, you will do the following tasks:

•	Open the FrontPage Explorer

•	Create a web using the FrontPage Explorer

•	Learn about the FrontPage Explorer and how to navigate within it

•	Create and modify a page in the FrontPage Editor

•	Save a page to a web

•	Close a web

•	Exit FrontPage


To Create a New Web (1)

The Learning FrontPage tutorial describes how to access and manage files using Windows 95. If you are using a different operating system, the method you use to access and manage files will be different, however, the names of the files and folders (or directories) are the same.

If you want to use FrontPage's Personal Web Server to take this tutorial and it is not already running, click the Start button, the choose Programs: Microsoft FrontPage: Personal Web Server.

Note: If you want your FrontPage Explorer to match the illustrations, make sure that the Link View button is pressed:

1	In the FrontPage Explorer, choose File: New Web.

The New Web dialog box is displayed.

2	In the New Web dialog box, select Learning FrontPage.

Learning FrontPage is a template, which is a set of predesigned formats for text and images on which pages and webs can be based. After a page or web is created using a template, you can modify the page or web.

3	Click OK.

The New Web From Template dialog box is displayed.

4	In the Web Server field, verify that the name of the server is correct.

The name of your server may be the Internet protocol address (IP address) of the machine on which you are working, or a host name, which is a unique name a computer may have when it is on a TCP/IP network.

An example of an IP address is 192.200.44.69. An example of a host name is www.company.com.


The FrontPage Explorer
FrontPage Explorer


The New Web Dialog Box
New Web dialog box


New Web From Template dialog box


To Create a New Web (2)

5	In the Web Name field, type a name for the web, then click OK.

We chose Desserts.

The length, character restrictions, and case sensitivity of the name depends on the server you are using.

Note: You cannot have more than one web with the same name on a server.

The Name and Password Required dialog box is displayed.

6	In the Name field, type the name of an administrator of this web.

If you installed the FrontPage server yourself during the installation of FrontPage, this is the administrator name you entered at that time.

7	In the Password field, type the password associated with the administrator.

8	Click OK.

FrontPage creates a web called Desserts.  As the tutorial progresses, you will understand why we called it Desserts.


We chose "Desserts"
Type a name for the web


Name and Password Required dialog box


Type the password


FrontPage creates a web


The New Web

The web you created is based on a template web, made up of predesigned pages and links. Your web has the following pages and files:

•	Learning FrontPage

•	Solution Page

•	Brownies

•	Lesson 2

•	Lesson 3

•	Lesson 4

•	Results from Form 0 of Page lesson4.htm

•	Hrule.htm

•	images/hrule.gif

•	images/undercon.gif

Looking at the web now, you do not see all the pages and files listed above. In the following sections, you will learn about the views in the FrontPage Explorer and which pages and files they display.


The Outline View (1)

The Outline View is a hierarchical representation of a web. In the Outline View, an icon of a page indicates a page or file, and the title of the page or file is displayed to the right of the icon.

The home page appears at the top of the view and has an icon of a house beside it. A home page is a starting point in a web and is the page that is retrieved and displayed by default when you visit a site on the World Wide Web.

The Outline View can be expanded to see a page’s links, then collapsed to see an outline of the pages and files in a web.

When the Outline View is collapsed, a page that has a link to another page has a plus sign next to it and a red arrow on the page icon.


The Outline View (2)

When the Outline View is expanded, a page that has a link to another page has a minus sign next to it, the link is displayed below with a page icon, and the title of the linked page is to the right of the icon. A gray arrow means that the page has already been expanded elsewhere in the Outline View.

The Outline View also shows pages that are not linked to other pages in the web. A page that is not linked to another page has a page icon but does not have an arrow or plus or minus sign next to it.

In the Learning FrontPage tutorial, the pages that do not have links are: Lesson 2, Lesson 3, and Results from Form 0 of Page lesson4.htm.

“Results from Form 0 of Page lesson4.htm” is the name of the page that collects responses when the form on the Lesson 4 page is submitted. You will learn about bots and forms in Lesson 3.


Pages that do not have links


To Expand and Collapse the Outline View

1	In the Outline View of your web, click the plus sign next to Solution Page.

Solution Page has a link to Hrule.htm, which is an HTML page you will use when learning about WebBots™, and another link to Learning FrontPage, which is the home page. The Outline View shows a minus sign next to Solution Page and the page icon is a darker color to indicate that it has been expanded.

Learning FrontPage also has a minus sign next to it. When you open a web, the home page will always be expanded.

2	Click the plus sign next to Brownies.

Brownies has links to Hrule.htm and Learning FrontPage also. The Outline View shows a minus sign next to Brownies and the page icon is a darker color to indicate its links have been expanded.

3	Click the minus sign next to Solution Page.

The Outline View shows a plus sign next to Solution Page to indicate its links have been collapsed.

4	Click the minus sign next to Brownies.

The Outline View shows a plus sign next to Brownies to indicate its links have been collapsed.


The home page will always be expanded


The Link View

The Link View is a graphical display of your web.  Pages are displayed as page icons, and the title of a page labels the icon. Page icons have plus or minus signs to indicate whether a page’s links have been expanded or collapsed.

In the Link View, an arrow indicates that the page in the center of the view contains a link to another page. A line with a solid circle indicates that a page is included in the page in the center of the view. In your web, the page Brownies links to Learning FrontPage and includes Hrule.htm.

Selecting a page or file in the Outline View moves that page or file’s icon to the center of the Link View. In the screen above, Brownies is at the center of the Link View because it is selected in the Outline View.


The Link View


Using the Outline and Link Views Together (1)
Using the Outline and Link Views Together

If a selected page has links, the links are displayed in the Link View whether the page is expanded or collapsed in the Outline View.

1	In the Outline View, click the name Solution Page.

Solution Page is highlighted in the Outline View and has moved to the center of the Link View. The arrow pointing from Solution Page to Learning FrontPage indicates that Solution Page has a link to Learning FrontPage. The solid circle next to Hrule.htm indicates that the page is included in the Solution Page. Learning FrontPage has a plus sign to indicate that it has links.

2	Expand the view of Solution Page in the Outline View by clicking the plus sign next to it.

The Link View does not change.

3	In the Outline View, click Lesson 2.

The page icon for Lesson 2 is displayed in the center of the Link View. The Lesson 2 page is not linked to another page so no links are displayed.

4	Use your mouse to resize the panes. Place the pointer on the vertical bar between the two panes until it changes to vertical parallel lines with horizontal arrows. Hold down the left mouse button and move the vertical bar.

As pages and files get added and linked in a web, the relationships among those pages and files might get difficult to visualize. By using the Outline and Link Views simultaneously to graphically isolate a single page and all its links, your web’s organization becomes clear.


Solution Page is highlighted


Expand the view of Solution Page


The page icon for Lesson 2 is displayed


To Create a New Page from the FrontPage Editor

When you want to add a new page to a web, you can use one of the page templates in the FrontPage Editor. The FrontPage Editor has many templates on which you can base your web pages.

The page you create in the FrontPage Editor will be called “Lesson 1.”

1	Choose Tools: Show FrontPage Editor, or click the Show FrontPage Editor button:

The FrontPage Editor is displayed.

2	Choose File: New.

The New Page dialog box is displayed.

3	In the New Page dialog box, select Normal Page, then click OK.

The FrontPage Editor creates an empty page called Untitled Normal Page.

Next, you will use the FrontPage Editor to edit the page you just created. The FrontPage Editor is like other word-processing programs; however, all the styles you apply in the FrontPage Editor are based on the Hypertext Markup Language (HTML). When you apply HTML styles to text, you see the result of the style as it would appear in a web browser. You do not see the HTML code.


FrontPage Editor creates an empty page


New Page dialog box


To Edit a Page in the FrontPage Editor

1	Choose Insert: Heading: 1.

The cursor changes size to indicate a larger font.

2	Next, type:

Chocolate Chip Cookies

3	Choose File: Save As.

The Save As dialog box is displayed.

4	In the Page Title field, type Lesson 1.

As you enter a page title, FrontPage creates a page URL based on the title you enter.

A page’s title is displayed by the FrontPage Editor and FrontPage Explorer and is used to identify the page in many FrontPage Editor commands.

5	In the Page URL field, verify that the URL is “lesson1.htm”.

A page URL is the page’s name relative to the web. Page URLs are also used to identify the page in FrontPage Editor commands.

6	Click OK.

The Lesson 1 page is saved to the web.

7	Choose Tools: Show FrontPage Explorer, or click the FrontPage Explorer button:

The FrontPage Explorer is displayed and “Lesson 1” is now a part of the Desserts web.


Type "Chocolate Chip Cookies"


Save As dialog box is displayed
Save As dialog box


The FrontPage Explorer
The FrontPage Explorer is displayed


Closing a Web

You can only have one web open at a time. When you close the current web, the FrontPage Explorer remains open.

•	Choose File: Close Web.


What's Ahead
What’s Ahead

You have been introduced to the FrontPage Explorer and the FrontPage Editor, two components of FrontPage. In the FrontPage Explorer, you learned about the Outline and Link Views. In the FrontPage Editor you added a new page to the web you created and added text to a page. Now you understand why we called our web Desserts.

In the next lesson, you will use the FrontPage Editor to enter a recipe for chocolate chip cookies.


To Finish Lesson 1

You can continue with Lesson 2 now, or close FrontPage and complete the tutorial at a later time. When you close FrontPage, the tutorial closes.

To exit the FrontPage Explorer and the FrontPage Editor

1	Choose File: Exit.

The FrontPage Explorer closes and the FrontPage Editor is displayed.

2	Choose File: Exit.

The FrontPage Editor closes.


Using the FrontPage Editor

This lesson explores the FrontPage Editor and explains the FrontPage Explorer’s Summary View.

In FrontPage, you use the FrontPage Editor to edit web pages. A web page is a single document in a web containing topics that can be linked to other web pages.

Using the FrontPage Editor, you can apply all the styles available in HTML, without knowing how to write HTML. As you enter text, images, forms, and other web-page elements, the FrontPage Editor displays your page as a user will view it on the World Wide Web.

In this lesson, you will do the following tasks:

•	Open the FrontPage Explorer

•	Open a web

•	Explore the Summary View of the web

•	Open a page from the web

•	Create a table and add text in it

•	Add text using various paragraph styles

•	Save the page to the web

•	Exit the FrontPage Editor

•	Exit the FrontPage Explorer


To Start the Personal Web Server

If you want to use the Personal Web Server to take this tutorial, make sure that it is running. To start the Personal Web Server, click the Start button, then choose Programs: Microsoft FrontPage: Personal Web Server.

After the Personal Web Server is opened, it is automatically minimized and remains minimized during your Windows session.


To Open a Web

1	In the FrontPage Explorer, choose File: Open Web, or click the Open Web button.

The Open Web dialog box is displayed.

2	In the Web Server field, enter the name of your server, then click List Webs.

In the Webs field, the Open Web dialog box lists the webs on your web server.

3	In the Webs field, select the name you chose for your web, then click OK.

This operation requires authorization. The FrontPage Explorer displays the Name and Password Required dialog box.

4	In the Name field, type the name of the author of this web.

If you are an administrator of this web, enter your administrator name. If you are registered as an author for this web, enter your author name.

5	In the Password field, type your password, then click OK.

The web is displayed in the FrontPage Explorer. You will first explore the FrontPage Explorer’s Summary View and then learn more about the FrontPage Editor.


Open Web dialog box


Open Web dialog box lists webs


To Display the Summary View

•	Choose View: Summary View or click the Summary View button:

The Summary View displays in the right-hand pane.

Image files are listed in the Summary View. The Learning FrontPage tutorial has image files called images/hrule.gif and images/undercon.gif. You will insert images/hrule.gif in a page in Lesson 3 of this tutorial. The images/undercon.gif—an image of a person digging with a shovel—can be used on an unfinished page to indicate that it is “under construction.”

When a page or file is selected in the Summary View, you can use the same FrontPage Explorer commands that you can use when a page is selected in the Outline or Link Views.


Summary View


The Summary View

The FrontPage Explorer’s Summary View has eight categories of information about the pages and files in a web:

•	Title

This is the title of the page, or URL if the page has no title.

•	File Name

This is the file name of the page or file.

•	Size

This is the size of the file.

•	Type

This is the file type, for example HTM or GIF.

•	Modified Date

This is the date the file was last modified.

•	Modified By

This is the author who last modified the file.

•	Page URL

This is the page URL, which is the page’s name relative to the web containing the page.

•	Comments

These are any notes about the page.


To Sort Categories in the Summary View

The information in the Summary View can be sorted by any category. By default the information is sorted by title.

1	Click the Size heading.

The fields are sorted by file size, from smallest to largest. The last entry is now “Brownies.”

2	Move the pointer between the Title and File Name headings so that the pointer becomes a cross. Click and continue to hold down the left mouse button while you move the mouse to the right.

The Title heading becomes wider. Use this feature to customize the field sizes of any of the categories.

3	Choose View: Link View, or click the Link View button.

The Link View displays in the right-hand pane.


Exploring the FrontPage Editor

Now you will go on to the main task of this lesson: exploring the FrontPage Editor.

1	Select the page “Lesson 2” in the Outline View of the FrontPage Explorer.

When you select the page, it is also displayed in the Link View.

2	In the Link View, double-click Lesson 2.

The FrontPage Editor opens, displaying Lesson 2.

In this portion of the tutorial, you will practice using the FrontPage Editor to insert text in various formats and styles on the page.


The page is displayed in the Link View


The page is displayed in the Link View
The FrontPage Editor opens


To Add Text to a Page

1	Use the END key to move the insertion point to the end of the line “Chocolate Chip Cookies,” and press ENTER.

Pressing ENTER creates a new paragraph on the page.

2	Select the style Normal from the drop-down list in the Change Style window on the toolbar.

3	Type the following line, then press ENTER:

Feedback Form

You have created a Normal text paragraph. Normal is the basic paragraph style for web pages. In Lesson 4 you will create a link from this paragraph to another topic on the page.

4	Select the style Heading 2 from the drop-down list in the Change Style window.

The cursor enlarges. Heading 2 text is larger than Normal text.

5	Type the following line, without pressing ENTER when you are done typing:

Ingredients

You have created a Heading 2 text paragraph. Heading 2 is similar to Heading 1, with a smaller point size. It is used to create sub-headings on a web page. Your page should look like this.


Change-Style window
Change Style window


Your page should look like this


To Create a Table

You will now insert a table for the ingredients of chocolate chip cookies. With a table, you can format side-by-side paragraphs easily.

Make sure that the insertion point is at the end of the line Ingredients.

1	Choose Table: Insert Table, or click the Insert Table button.

The Insert Table dialog box is displayed.

2	In the Rows field, enter 5.

The default in the Columns field does not need to change.

To make the lines of ingredients close together for easy reading, you will also change the following fields in the dialog box: Cell Padding, Cell Spacing, and Specify Width.

3	In the Cell Padding field, enter a zero.

Cell Padding is the space—measured in pixels—between the contents and inside edges of cells. By removing the cell padding, the space between the lines of list items will be made as close as this setting allows.

4	In the Cell Spacing field, enter a zero.

Cell Spacing determines the space—measured in pixels—between cells in a table. By removing the cell spacing, the space between the two columns of list items will be made as close as this setting allows.

Now that Cell Padding and Cell Spacing are reduced as much as possible, the list items will not have too much space around them and will be easy to read.

The Specify Width field is already selected and is set to 100 percent. If that setting was accepted, the table would span the entire width of the window, and the two columns of ingredients would have too much space between them. You will change the percentage to make the width of the ingredients list conform to the rest of the page.

5	Enter 50 in the Specify Width field.

6	Click OK.

FrontPage creates a table with five rows and two columns that spans 50 percent of the window width.


Your page should look like this
The Insert Table dialog box


The edited Insert Table dialog box


FrontPage creates a table


To Enter Text in a Table

Now each ingredient in the chocolate chip recipe will be added to a cell in the table.

1	Move the insertion point to the first cell in the left column by clicking in that cell.

2	Type the following line:

1 & 1/8 c. flour

3	Type the next four ingredients in the left column. Use the arrow keys to move to each cell.

1/4 t. baking soda

1/2 t. salt

1/2 c. butter

1/4 c. brown sugar

4	Type the next five ingredients in the right column:

1/2 c. sugar

1 egg, beaten

1/2 t. vanilla

1/2 c. chopped walnuts

1/2 lb. chocolate chips

Your table should look like this.


Your table should look like this


To Create a Numbered List

You will now create a numbered list describing how to prepare the cookie recipe.

1	Press the DOWN ARROW key to move the insertion point to a new line.

2	Choose Insert: Heading 2.

3	Type the following line:

Preparation

You have created a Heading 2 text paragraph.

4	Choose Insert: List: Numbered

5	Type the following words without pressing ENTER when you are done

Pre-heat oven to 350

6	Choose Insert: Special Character.

The Special Character dialog box displays.

7	Now, select the degrees character (it is below the “p”).

8	To insert the character, click Insert, then click Close to close the dialog box.

9	Finish the first list-item by typing a space, then “F.”

10	Press CTRL+END.

The key combination CTRL+END ends the current list.

The page should now look like this.


Special Character dialog box


The first list-item should look like this


To Insert a File

Although it would be good practice to use the FrontPage Editor to type the rest of the steps of the preparation, it is quicker to insert them from a file.

With the FrontPage Editor, you can insert the following types of files: text (TXT), rich text format (RTF), or HTML (HTM or HTML). The file you will insert will be an RTF file.

Make sure the insertion point is on a new line below Step 1.

1	Choose Insert: File.

The Insert dialog box is displayed. The file you want to insert is named prepare.rtf.

2	In the Insert dialog Box, choose the following path if you installed FrontPage in the \Program Files folder on your c: drive: c:\Program Files\Microsoft FrontPage\data\tutorial\prepare.rtf. If you changed the root installation drive or folder, adjust the path accordingly. In the Files of type field, choose RTF Files.

3	Select Prepare, then click Open.

The contents of the prepare.rtf file—a numbered list—is converted to HTML and added to the page as a separate list. The next step is to join the two lists.

4	Move the insertion point after the list item you entered (not the first list-item that was inserted from a file).

5	Press DELETE.

The two lists are joined and are consecutively numbered. The cursor is at the end of Step 1.

6	Press CTRL+END.

The key combination CTRL+END ends the current list.


The two lists are joined and are consecutively numbered


To Finish the Recipe

To finish the recipe, you need to add some more text.

1	Type the following line, without pressing ENTER:

Makes 50 cookies.

Your insertion point should be at the end of the line you just typed.

2	Select the style Address from the drop-down list in the Change Style window on the toolbar.

Address is an italicized style.

3	Press CTRL+SHIFT+LEFT ARROW repeatedly until all the text on the current line is selected.

FrontPage provides standard Windows text-editing commands.

4	When the text is selected, click the Bold button on the standard toolbar:

The selected text is now bold.

5	Use the END key to move the insertion point to the end of the line.


The insertion point should be at the end of the line
Move the insertion point to the end of the line


To Save the Page

Before continuing, it is a good idea to save your work.

•	Choose File: Save.

The page is saved to the web.


To Add Additional Text

1	Press ALT+I H 2.

The Editor inserts a new Heading 2 paragraph.

FrontPage provides keyboard short cuts for many commands.

2	On the new line type the following, then press ENTER:

Your feedback goes here:

In Lesson 3, you will create a form below this line to accept user’s feedback.

3	Select the style Normal from the drop-down list in the Change Style window on the toolbar.

4	Type the following line:

Back to Home Page

In Lesson 4, you will create a link from this line to the web’s Home Page. Now, your page should look like this.


You will create a link from this line


What's Ahead
What’s Ahead

You have been introduced to the FrontPage Editor and have practiced creating paragraphs of various types. You have used the FrontPage toolbar and menus to select paragraph formats and to execute other FrontPage Editor commands.

In the next lesson, you will learn how to add forms to a page, and about bots—page objects that use FrontPage programs on the server to dynamically change your page.


To Finish Lesson 2

You will now save the changes you made.

1	Choose File: Exit.

The Exit command prompts you to save your changes to the page.

2	Click Yes.

The page is saved and the FrontPage Editor closes.

You can continue with Lesson 3 now, or close FrontPage and complete the tutorial at a later time. When you close FrontPage, the tutorial closes.

To close the FrontPage Explorer

•	In the FrontPage Explorer, choose File: Exit.

The FrontPage Explorer closes.


Using Forms and Bots

In this lesson, you will do the following tasks:

•	Create a form

•	Create some WebBots™ (also called “bots”)

•	Configure a form handler

If you want to use the Personal Web Server to take this tutorial, make sure that it is running. To start the Personal Web Server, click the Start button, then choose Programs: Microsoft FrontPage: Personal Web Server.

After the Personal Web Server is opened, it is automatically minimized and remains minimized during your Windows session.


About Forms (1)

Forms are collections of form fields that you group together on a page to collect input from a user. FrontPage includes the following form fields:

•	Check Box

Lets the user make a choice by clicking a box.

•	Radio Button

Lets the user make a choice by clicking a button.

•	Drop Down Menu

Lets the user make a choice from a drop-down menu.

•	One-Line Text Box

Lets the user enter text in a single-line field.

•	Scrolling Text Box

Lets the user enter text in a multi-line field.

•	Push Button

Lets the user submit a form for processing or clear a form and return it to its initial state.

•	Image

Lets the user click an image to submit a form for processing.


About Forms (2)

Each form field has properties that define it. Two of these properties, the field’s name and value, are used by the form's form handler to process the field. A form handler is a program on a server that runs when a user submits a form. The value of a field is based on the user’s input. The name of a field identifies the field when the form is processed.

Forms also have properties. The most important property of a form is the form handler you assign to it. A form handler is called by the server when the form is submitted. FrontPage supplies form bots, which are form handlers for the most common types of forms. Form bots are available on your Personal Web Server, and on any web server that FrontPage supports.

Form bots are one type of FrontPage bot. Later in this lesson, you will learn more about bots. First, you will practice creating forms.


To Open a Page in a Web

1	Open the web you created for this tutorial.

2	Select the page “Lesson 3” in the Outline View of the FrontPage Explorer.

When you select the page, it is also displayed in the Link View.

3	In the Link View, double-click Lesson 3.

The FrontPage Editor opens, displaying Lesson 3. The Lesson 3 page includes the text you added in Lesson 2.


To Create a Form

In this part of the tutorial, you will use the FrontPage Editor to create a form.

1	In the FrontPage Editor, scroll down the page, then place the insertion point at the end of the line "Your feedback goes here:"

2	Choose Insert: Form Field: One-Line Text Box.

The Text Box Properties dialog box is displayed. When you create a form field, you must set its properties. The only required property of a One-Line Text Box is Name. A One-Line Text Box field must have a name to identify it when the form is submitted.

3	In the Name field, type Cookies.

The Initial value field contains the contents of the form field as it will appear when the user browses to the form or when the user clears the form. A blank initial value means that the field will be blank initially. In this lesson, use the default initial value, character width, and maximum characters.

4	Click OK to accept the field’s properties.

If you create a form field with the insertion point inside a form, FrontPage adds the field to the form. If you create a form field with the insertion point outside of any forms, FrontPage creates a new form containing the single field.

Because you added the One-Line Text Box outside of any forms, the FrontPage Editor creates a new form with a One-Line Text Box field. The form is represented by a dashed rectangular border.

Next, you will add a Push Button field to the form. A Push Button allows users to submit the form after they fill it in.


Place the insertion point at the end of the line


Text Box Properties dialog box


The form is represented by a dashed border


To Add a Push Button Field

1	The insertion point should be to the right of the One-Line Text Box field. To create a new line inside the form, press ENTER.

The form now contains two lines: a line containing the One-Line Text Box and an empty line.

2	With the insertion point on the new line, click the Push Button button on the Forms toolbar.

The Forms toolbar contains a button for each form field except the Image field. Using a form field button is the same as using a command on the Insert: Form Field sub-menu.

The Push Button Properties dialog box displays. The Name and Value/Label fields for a Push Button are optional. Leave the Name field blank. FrontPage suggests “Submit” as the label for the button.

Because a Push Button field invites the user to do some action, it is important that the field has a clear label.

3	In the Value/Label field, type Submit Feedback.

Notice that the Push Button is configured by default to submit the form. You can also configure a Push Button to reset the form. When you reset a form, all form fields are reset to their initial values.

4	Click OK to accept the field’s properties.

The FrontPage Editor creates a Push Button form field with the label “Submit Feedback.” The form should look like this.


Push Button Properties dialog box


The form should look like this


To Display a Form's Properties

You set a form field’s properties when you first create the field. However, you may need to reopen a properties dialog box to change a field’s properties.

1	Click once on the Submit Feedback button to select it.

When a form field is selected, it is displayed with handles at each of its corners.

2	Press ALT+ENTER to open the Push Button Properties dialog box. (Typing ALT+ENTER is the same as choosing the Edit: Properties command.)

The Push Button Properties dialog box opens.


To Configure a Form

You configure a form in the Form Properties dialog box. You open the Form Properties dialog box by first opening any form field’s Properties dialog box, then clicking the Form button.

1	Click Form in the Push Button Properties dialog box.

The Form Properties dialog box is displayed. In this lesson, you use the Form Properties dialog box to associate a form handler with the form. A form handler is a program that processes the form on the server. A form’s form handler is called by the server when the form is submitted.

The current value of the Form Handler field is Custom CGI (Common Gateway Interface) script. A custom CGI script is a user-defined form handler. Custom CGI scripts are difficult to create and require programming knowledge. FrontPage supplies form handlers, called form bots, that perform the most common form-handling functions. These form bots make it unnecessary for you to create custom CGI scripts for most applications.

2	In the Form Properties dialog box, click in the Form Handler field.

A drop-down list displays the FrontPage form bots.

3	From the drop-down list, select Save Results Bot.

You will now configure the Save Results Bot.


Form Properties dialog box


Configuring a Save Results Bot (1)

A bot is an object you insert on your page or associate with a form. Each bot modifies the appearance of your page or adds new pages to your web. When a page with bots is saved to the server, a program called a script that generates HTML is run on the server. Without bots, you would need to write your own scripts or add complicated HTML commands to your page to achieve the same results.

In this section of this lesson, you will create and configure a Save Results Bot. The Save Results bot saves the results of a form in a file on your web. A complete list of the FrontPage bots is included at the end of this lesson.

1	In the Form Properties dialog box, click Settings.

The Settings For Saving Results of Form dialog box opens. It has two tabs: a Results tab and an Advanced tab.

You will edit the Results tab.

2	In the File for Results field, type the following:

feedback.htm

This is the name of the file in which form results will be written by the bot. This file has the title “Results from Form Field 0 of Page lesson4.htm” in your web.

The File Format field displays the default format: HTML. This format is designed to be easily readable. You can also select text formats that are designed to be compatible with text databases and spreadsheet programs. In this exercise, accept the default setting.

When the Include Field Names in Output check box is selected, it configures the bot to label each field in the output file with its name.


Settings For Saving Results of Form dialog box


Configuring a Save Results Bot (2)

3	Click OK.

The Settings For Saving Results of Form dialog box closes. You have configured the bot. The FrontPage Editor displays the Form Properties dialog box.

4	Click OK.

The Form Properties dialog box closes. You have configured the form. The FrontPage Editor displays the Push Button Properties dialog box.

5	Click OK.


To Insert an Include Bot

An Include bot is replaced with the contents of another page from the same web. Using an Include bot on multiple pages in a web makes it easy for an element on a web page to have the same appearance throughout the web. If you change the contents of the page used by the Include bot, that change is made to every page in the web that has that Include bot inserted in it.

For example, it would be a good idea to have the same horizontal line separate the recipe from the feedback form on all recipes pages in this tutorial web. Horizontal lines are useful as design elements and topic separators in web pages.

In the final section of this lesson, you will insert an Include bot.

1	Move the insertion point to the end of the “Makes 50 cookies” line.

2	Choose Insert: Bot.

The Insert Bot dialog box is displayed. Ten bots are listed in the Select a Bot field. A complete list of bots is included at the end of this lesson.

3	In the Insert Bot dialog box, select Include, then click OK.

The Include Bot Properties dialog box is displayed. In this dialog box, you specify the page URL of the file that the Include bot will use.

4	Click Browse.

The Current Web dialog box is displayed. In this dialog box, each page in the current web is listed by its page title and page URL.

5	Next, select hrule.htm, then click OK.

6	Click OK in the Include Bot Properties dialog box.

The contents of the hrule.htm file—a purple horizontal line—is added to the page and creates a separation between the chocolate chip cookie recipe and the feedback form.

Bots have properties—values that characterize them—just like all elements on a web page. Next, you will learn how to view a bot’s properties.


The Insert Bot dialog box is displayed
The Insert Bot dialog box


Select hrule.htm


A purple horizontal line is added to the page


To View a Bot's Properties

Bots have a special pointer to indicate where they are on a web page. When the pointer changes to a Bot pointer, you are able to access the Properties dialog box of a bot.

1	Move the pointer over the horizontal line.

The pointer changes to the Bot pointer.

2	Double-click the left mouse button.

The Include Bot Properties dialog box is displayed and shows the page URL of the web page that was included in the Include bot.

3	Click Cancel, then click the left mouse button so the horizontal line is not selected.


The pointer changes to the Bot pointer


FrontPage WebBots
FrontPage WebBots™

The following bots are available in FrontPage:

•	Annotation Bot

Inserts place-holder text or notes to yourself as you create your web pages. The text created by an Annotation Bot can be viewed from the FrontPage Editor but not from a web browser.

•	Confirmation Field Bot

Is replaced by the contents of a form field.

•	Discussion Bot

Collects information from a form, formats it into an HTML page, and adds the page to a table of contents.

•	HTML Markup Bot

Writes its contents out as HTML rather than as plain text.

•	Include Bot

Is replaced by the contents of a page in the web.

•	Registration Bot

Allows users to register for a service on your server.

•	Save Results Bot

Gathers information from a form and stores it in a file in one of many formats.

•	Scheduled Image Bot

Is replaced by an image in your web during a specified time-period.

•	Scheduled Include Bot

Is replaced by a page in your web during a specified time-period.

•	Search Bot

Creates a search form on the page. At runtime, the form lets users search for pages in the web containing specified text.

•	Substitution Bot

Is replaced by the value of a specified web-configuration variable or page-configuration variable.

•	Table of Contents Bot

Creates a table of contents of a web, with links to each page.

•	Timestamp Bot

Is replaced by the date and time the page was last edited.


What's Ahead
What’s Ahead

You have been introduced to forms and bots. You have created and configured a form that accepts text input from a user. You have created and configured a Save Results bot that writes users’ input to a results file, and you have added an Include bot that is replaced with the contents of another page from the same web.

In the next lesson, you will create the links from text that tie your web together.


To Finish Lesson 3

You will save the final changes you made and exit the FrontPage Editor.

1	Choose File: Exit.

The Exit command prompts you to save your changes to the page.

2	Click Yes.

The page is saved and the FrontPage Editor closes.

You can continue with Lesson 4 now, or close FrontPage and complete the tutorial at a later time. When you close FrontPage, the tutorial closes.

To close the FrontPage Explorer

•	In the FrontPage Explorer, choose File: Exit.

The FrontPage Explorer closes.


Creating Links

When you link pages, you are providing possible ways for a user to navigate through the pages in a web, or go to other resources on the World Wide Web, such as Gopher or FTP.

In this lesson, you will do the following tasks:

•	Create a bookmark

•	Create links

In Lesson Two, you created the following lines of text:

Feedback Form

Your feedback goes here:

Back to Home Page

In this lesson, you will make a bookmark at the line “Your feedback goes here.” A bookmark is a named set of characters on a page that can be the target of a link. You establish bookmarks so users can browse to topics within a page.

After creating the bookmark, you will make links at the lines “Feedback Form” and “Back to Home Page.” A link is a jump from a web page to another page or bookmark in the current web, or to a resource on the World Wide Web.

If you want to use the Personal Web Server to take this tutorial, make sure that it is running. To start the Personal Web Server, click the Start button, then choose Programs: Microsoft FrontPage: Personal Web Server.

After the Personal Web Server is opened, it is automatically minimized and remains minimized during your Windows session.


To Create a Bookmark (1)

Now, you will create a bookmark.

1	Open the web you created for this tutorial.

2	In the Outline View, select Lesson 4.

3	Choose Edit: Open.

The Lesson 4 page is displayed in the FrontPage Editor. The Lesson 4 page includes the form you added in Lesson 3.

4	Use the scroll bar at the right of the FrontPage Editor window to scroll down to “Your feedback goes here:”

5	Select “Your feedback goes here:”


Scroll to "Your feedback goes here:"


To Create a Bookmark (2)

6	Choose Edit: Bookmark.

The Bookmark dialog box is displayed.

7	In the Bookmark Name field, type “feedback,” then click OK.

A dashed line appears under the text to indicate that a bookmark has been made:

Next, you will create a link. The target of this link will be the bookmark at “Your feedback goes here:


Bookmark dialog box


Type "feedback"


A dashed line appears under the text


To Create a Link

1	Press CTRL+HOME to go to the top of the page.

The FrontPage Editor provides standard Windows keyboard shortcuts.

2	Select the line “Feedback Form.”

3	Choose Edit: Link.

The Create Link dialog box is displayed with the Open Pages tab open.

4	In the Open Pages field, click "Lesson 4."

The URL field now displays the page URL for the page Lesson 4.

5	In the Bookmark field, select “feedback” from the drop-down list, then click OK.

The continuous line under “Feedback Form” and the changed text color indicate the link.


Create Link dialog box


Select Lesson 4


Select "feedback" from the drop-down list


Line and color indicate the link


To Follow a Link

The FrontPage Editor’s Follow Link command provides a convenient way for you to follow a link within your web or to the World Wide Web. If the link leads to a bookmark on the currently open page, the FrontPage Editor scrolls the window to that point. If the link leads to another page within a web or on the World Wide Web, the FrontPage Editor opens that page.

You will use the Follow Link command to follow the bookmark you just created.

1	Make sure the insertion point is on the Feedback Form line.

When the insertion point is on the line of a text link, the Follow Link command is available.

2	Choose Tools: Follow Link, or press CTRL+Left Mouse button.

The FrontPage Editor window scrolls to the bookmark “Your feedback goes here,” which is selected.


To Create a Link to the Home Page (1)

The next link you create will be to another page in the web.

1	Press CTRL+END to go to the end of the page.

2	Select the line “Back to Home Page.”

3	Choose Edit: Link.

The Create Link dialog box is displayed. This time, you will link to a page in the current web.

4	Click the Current Web tab.

The Current Web tab allows you to create a link to a page or bookmark in the current web.

5	Click Browse.

The Current Web dialog box is displayed. In this dialog box, each page in the current web is listed by its page title and page URL.

6	Now select Learning FrontPage, then click OK.


Create Link dialog box


Current Web tab


Select Learning FrontPage


To Create a Link to the Home Page (2)

The Page field now contains index.htm. Index.htm is the page URL of “Learning FrontPage.” A page URL is the page’s name relative to the web containing the page.

7	Click OK.

The continuous line under “Back to Home Page” and the changed text-color indicate the link.

8	Choose File: Close.

You are prompted to save the changes you made to the “Lesson 4” page.

9	Click Yes.

The FrontPage Editor saves the changes.


The Page field contains index.htm


Line and color indicate the link


What's Ahead

You have been introduced to bookmarks and links in the FrontPage Editor—two powerful ways to move around in a web or on the World Wide Web. Also, you have used the Follow Link command which allows you to move from link to link.

In the next lesson, you will learn how to insert images and make a clickable image—a link to a page from an image. Also, you will add a Search Bot to your web’s home page so you can look for a word or series of words within the pages of the web.

Lastly, you will want to open a web browser to test and view the features and design of the web.


To Finish Lesson 4

You will save the final changes you made and exit the FrontPage Editor.

•	Choose File: Exit.

You can continue with Lesson 5 now, or close FrontPage and complete the tutorial at a later time. When you close FrontPage, the tutorial closes.

To close the FrontPage Explorer

•	In the FrontPage Explorer, choose File: Exit.

The FrontPage Explorer closes.


Creating Clickable Images

In Lesson 4, you learned how to create a link to a page from a line of text. In this lesson, you will learn how to create a clickable image—a link to a page from an image.

In the lesson, you will do the following tasks:

•	Insert an image

•	Make clickable images

•	Change page properties

•	Add a Search bot

If you want to use the Personal Web Server to take this tutorial, make sure that it is running. To start the Personal Web Server, click the Start button, then choose Programs: Microsoft FrontPage: Personal Web Server.

After the Personal Web Server is opened, it is automatically minimized and remains minimized during your Windows session.


To Insert an Image

FrontPage supports many image formats. In the next procedure, you will insert a Graphics Interchange Format (GIF) image from your local file system into the web’s home page.

1	Open the web you created for this tutorial.

2	Click the Show FrontPage Editor button:

3	In the FrontPage Editor, choose File: Open from Web.

The Current Web dialog box displays.

4	Select Learning FrontPage, then click OK.

This page has two lines of text: “Learning FrontPage” and “Solution Page.”

5	Position the insertion point between the lines “Learning FrontPage” and “Solution Page.”

6	Choose Insert: Image.

The Insert Image dialog box is displayed.

7	In the Insert Image dialog box, click From File.

The Insert dialog box is displayed. The file you want to insert is named desserts.gif.

8	In the Insert dialog box, choose the following path if you installed FrontPage in the \Program Files folder on your c: drive: c:\Program Files\Microsoft FrontPage\data\tutorial\desserts.gif. If you changed the root installation drive or folder, adjust the path accordingly.

9	Select desserts, then click Open.

The image desserts.gif is displayed on the page.


Current Web dialog box


Insert Image dialog box


The desserts.gif image is displayed


Using Images As Links (1)

A common practice on the World Wide Web is to make links from an image. You will make two links from the images/desserts.gif image: the brownies portion of the image will link to the “Brownies” page, and the chocolate chip cookies portion of the image will link to the “Lesson 4” page that you just finished editing.

1	In “Learning FrontPage,” click the image you just inserted to activate the image toolbar:

When an image is selected, handles display at each of its corners.

2	Click the rectangle button:

The rectangle button creates a rectangular “hotspot.”

3	Move the pointer inside the image.

The pointer becomes a pencil.

4	Now move the pencil to the upper-left corner of the image.

You can place the pencil over the image’s handle.

5	Click and hold down the left mouse button, then drag the rectangle until it encloses just the brownies portion of the image.

When you let go of the mouse button, the Create Link dialog box is displayed so you can create a link from the hotspot.


Move the pencil to the upper-left corner


The Create Link dialog box


Using Images as Links (2)

6	Click the Current Web tab.

The Current Web tab allows you to create a link to a page or bookmark in the current web.

7	Click Browse.

The Current Web dialog box is displayed. In this dialog box, each page in the current web is listed by its page title and page URL.

8	In the Page Title field, select Brownies, then click OK.

Brownies.htm has been added to the Page field in the Current Web tab. “Brownies” is a page with a brownies recipe and is similar to the chocolate chip cookies recipe-page you created.

9	Click OK.

The Brownies section of the image is now a link. Next, you will create a link from the chocolate chip cookies image.


Current Web tab


Select Brownies


Brownies.htm has been added


The Brownies section is now a link


Creating Another Image Link

1	Click the rectangle button:

2	Move the pointer inside the image.

The pointer becomes a pencil.

3	Move the pencil to the upper-right corner of the image.

4	Click and hold down the left mouse button, then drag the rectangle until it encloses just the chocolate chip cookies portion of the image.

When you let go of the mouse button, the Create Link dialog box is displayed so you can create a link from the hotspot.

5	Click the Current Web tab.

6	Click Browse.

The Current Web dialog box is displayed.

7	In the Page Title field, select Lesson 4, then click OK.

The page lesson4.htm has been added to the Page field in the Current Web tab.

8	Click OK.

The chocolate chip cookies section of the image is now also a link.


Select Lesson 4


The chocolate chip cookies section of the image is a link


Adding a Background Image

With the FrontPage Editor, you can customize the appearance of a web page by setting text, link, and background color or adding a background image. When you customize a web page, you make it more visually pleasing and distinctive.

Next, you will add a background image to the “Learning FrontPage" home page.

1	Choose File: Page Properties.

The Page Properties dialog box displayed.

2	Select Background Image, then click Browse.

The Insert Image dialog box is displayed.

3	In the Insert Image dialog box, click From File.

The Insert dialog box is displayed. The file you want to insert is named backgrnd.jpg.

With FrontPage, you can insert image files from your file system to the current web. You are not restricted to images found in the current web.

4	In the Insert dialog box, choose the following path if you installed FrontPage in the \Program Files folder on your c: drive: c:\Program Files\Microsoft FrontPage\data\tutorial\backgrnd.jpg. If you changed the root installation drive or folder, adjust the path accordingly. In the Files of type field, choose JPEG.

5	Select backgrnd, then click Open.


The Page Properties dialog box


The file to insert is named backgrnd.jpg


Changing Text Color

To further enhance the appearance of the “Learning FrontPage” page, you will change the link color.

1	In the Page Properties dialog box, select Use Custom Link Color, then click Choose.

The Color dialog box is displayed.

2	In the Color dialog box, select the brick color, which is three squares above black in the left-most column of basic colors.

3	Click OK.

4	In the Page Properties dialog box, click OK.

The background image is added to the page, and the text of the link has changed color.


The Color dialog box


The background image is added and the link has changed color


Making a Color Transparent

After adding the background image, the white background of the desserts image appears too bold. To give the page a more uniform look, you will make the white background of the desserts image transparent. When you make a selected color transparent, it is replaced by the background image on a page.

1	Click the Make Transparent button on the Image toolbar:

2	Move the pointer inside the image.

The pointer becomes a pencil with an eraser.

3	Click the left mouse button anywhere on the white background.

The white background of the desserts image is made transparent.


The cursor becomes a pencil with an eraser
The pointer becomes a pencil with an eraser


The white background of the desserts image is made transparent


Saving your Work

Because you have made changes to “Learning FrontPage,” it would be a good idea to save your work.

1	Choose File: Save.

The Save Image to Web dialog box is displayed. This dialog box provides options for saving images to the currently open web. If you want the images you have added to be in a web when that web is accessed on the World Wide Web, you must save the images to the web. Also, when you copy a web, only the images that are part of the web will be copied.

2	In the Save Image to Web dialog box, click Yes to All because you added two images to the web.

The FrontPage Editor saves the backgrnd.jpg and desserts.gif files to the web and any editing changes.

The last element you will add to “Learning FrontPage” is a Search bot—a bot that creates a form for searching for a word or series of words in a web.


The Save Image to Web dialog box


Adding a Search Bot

The Search bot creates a search form that allows a user to search for a word or series of words in a web. The words entered by the user can contain parentheses and the following Boolean keywords: and, not, or. The search form created by the Search bot returns a list of links to the pages containing the words a user enters in the form in a web browser.

In a web containing recipes, it would be useful to be able to search for specific ingredients or cooking time. At the end of this lesson, you will open your web browser and use the search form.

1	Move the insertion point below the words Solution Page.

2	Choose Insert: Bot.

The Insert Bot dialog box is displayed.

3	In the Insert Bot dialog box, select Search, then click OK.

The Search Bot Properties dialog box is displayed. This dialog box contains fields for customizing the buttons that the Search bot will create. The default settings for the fields are acceptable.

4	Click OK.

The Search bot is added to the page. When you move the pointer between the dotted lines, it changes to the Bot pointer. Bot pointers indicate when bots are present on a page.

5	Choose File: Save.

The FrontPage Editor saves your editing.

Next, you will view the work you have done from the FrontPage Explorer.


Select Search


The Search Bot Properties dialog box


The Search bot is added to the page


Viewing the Web from the FrontPage Explorer

In Lessons 4 and 5 you have linked pages and added images; these changes affect the views in the FrontPage Explorer. You will now look at the views in the FrontPage Explorer to see how they have changed.

1	Click the FrontPage Explorer button:

2	In the FrontPage Explorer, click the Links to Images button:

In the Outline and Link Views, the Image icon is displayed to indicate that an image appears in a page.

The Outline and Link Views also show the links and bookmarks you created during the tutorial.


The Image icon is displayed


To Test the Desserts Web

Now, you can use your web browser to test the web you created.

1	Open the web in your web browser by supplying its absolute http URL.

For example: http://my_server/Desserts

Note: Your web browser might require a name and password to gain access to the web. The name and password will be the same as the ones you were authorized to use in FrontPage.

2	Move the insertion point to the text box at the right of the caption “Search for:”

Type “margarine”, then press click the Start Search button.

“Margarine” is only found in one document—Brownies. The Search bot provides feedback on the results of a search, displays the document titles it finds in a table, and creates a link to the documents it finds.

Note: When you submit a form the web browser (or server) displays a new page with the results of the search. If you click the Reset button on the page that displays the results, the text box is not cleared because the page that is currently displaying is not the page on which you started the search. To reset the text box and search for a different word, go back to the original page where you started the search and click Reset.


To Use the Feedback Form (1)

Now you will follow the links that were added to the image of chocolate chip cookies and brownies.

1	Click the chocolate chip cookies portion of the image.

The chocolate chip cookies recipe is displayed.

2	Click the link “Feedback form” at the top of the page.

The link takes you to the feedback form.

3	Type feedback into the form, such as Yummy!

4	Click Submit Feedback.

After submitting your feedback, a Form Confirmation page is displayed thanking you for your feedback.

5	Click the link “Return to the form.”

6	Go back to the home page by clicking on the “Back to Home Page” link at the bottom of the page, then click the brownies portion of the image.

7	Click the link “Feedback form” at the top of the page.

8	Type feedback into the form, such as I need more!

9	Click Submit Feedback.

After submitting your feedback, a Form Confirmation page is displayed thanking you for your feedback.


To Use the Feedback Form (2)

Now you will open FrontPage and verify that the comments you added about the recipes appear in the web you created.

10	Open the FrontPage Explorer, then open the web you created in the tutorial.

11	In the Outline View, select the “Results from Form 0 of Page lesson4.htm” page.

12	Press CTRL+O.

The “Results from Form 0 of Page lesson4.htm” page is opened in the FrontPage Editor. The feedback you added is listed.


To Exit FrontPage

You have completed the FrontPage tutorial. Now you are ready to create webs and pages using FrontPage. If you want to see our completed version of this lesson, open the Solution Page in the Desserts web.

1	In the FrontPage Editor, choose File: Exit.

The FrontPage Editor closes.

2	In the FrontPage Explorer, choose File: Exit.

The FrontPage Explorer closes.